let lessNodesAppended

const colorList = [{
        key: '薄暮',
        color: '#F5222D'
    },
    {
        key: '火山',
        color: '#FA541C'
    },
    {
        key: '日暮',
        color: '#FAAD14'
    },
    {
        key: '明青',
        color: '#13C2C2'
    },
    {
        key: '极光绿',
        color: '#52C41A'
    },
    {
        key: '拂晓蓝（默认）',
        color: '#1890FF'
    },
    {
        key: '极客蓝',
        color: '#2F54EB'
    },
    {
        key: '酱紫',
        color: '#722ED1'
    }
]

const updateTheme = (color) => {
    // Don't compile less in production!
    /* if (process.env.NODE_ENV === 'production') {
      return;
    } */
    // Determine if the component is remounted
    if (!color) {
        return
    }

    function buildIt() {
        if (!window.less) {
            return
        }
        setTimeout(() => {
            window.less
                .modifyVars(color)
                .then(() => {})
                .catch((e) => {
                    message.error('Failed to update theme')
                })
        }, 200)
    }
    if (!lessNodesAppended) {
        // insert less.js and color.less
        const lessStyleNode = document.createElement('link')
        const lessConfigNode = document.createElement('script')
        const lessScriptNode = document.createElement('script')
        lessStyleNode.setAttribute('rel', 'stylesheet/less')
        lessStyleNode.setAttribute('href', '/color.less')
        lessConfigNode.innerHTML = `
      window.less = {
        async: true,
        env: 'production',
        javascriptEnabled: true
      };
    `
        lessScriptNode.src = '/themconfig.js'
        lessScriptNode.async = true
        lessScriptNode.onload = () => {
            buildIt()
            lessScriptNode.onload = null
        }
        document.body.appendChild(lessStyleNode)
        document.body.appendChild(lessConfigNode)
        document.body.appendChild(lessScriptNode)
        lessNodesAppended = true
    } else {
        buildIt()
    }
}

const updateColorWeak = colorWeak => {
    // document.body.className = colorWeak ? 'colorWeak' : '';
    colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
}

export { updateTheme, colorList, updateColorWeak }